<template>
  <div class="expose-list-wrap">
    <div v-for="(item, index) in listData" :key="index" class="list-content">
      <div class="list-left">
        <!-- <div class="left-box">
          <el-checkbox
            v-model="item.isChecked"
            class="checkbox"
            :style="`${item.isChecked ? ' opacity: 1;' : ''}`"
          ></el-checkbox>
        </div> -->
      </div>
      <div class="list-middle">
        <img
          v-if="item.radarIconUrl"
          :src="iconPrefix(item.radarIconUrl)"
          alt=""
          loading="lazy"
          @error="setDefaultImage"
        />
        <img
          v-if="!item.radarIconUrl"
          alt=""
          src="@/static/images/retrieval/full.png"
        />
      </div>
      <div class="list-right">
        <div class="expose-list-top">
          <div class="list-top-left">
            <span :title="getName(item)" class="name" @click="clickItem(item)">
              {{ getName(item) }}</span
            >
            <OperateBtn
              v-if="item.link"
              :item="item"
              @operateClick="operateClick"
            ></OperateBtn>
            <RiskLevel :risk-list="item"></RiskLevel>
          </div>
          <div class="list-top-right">
            <AssetCount v-if="showRadar(item)" :item="item"></AssetCount>
            <FalseAlarm :item="item" @successFn="successFn"></FalseAlarm>
          </div>
        </div>
        <div class="expose-list-middle border-bottom">
          <div class="list-middle-left">
            <ul>
              <el-tooltip
                v-for="(child, index2) in item.fieldArr"
                :key="`${index2}-tip`"
                :content="tooltipContent(child)"
                effect="dark"
                placement="bottom"
              >
                <li>
                  <div class="left">
                    <i :class="`${child.icon}`"></i>
                  </div>
                  <div class="right">
                    <div class="item-box">
                      <span
                        v-for="(child2, i) in child.value"
                        :key="i"
                        class="item"
                      >
                        <span @click.stop="valueClick(child, child2)">{{
                          child2
                        }}</span>
                        <span
                          v-if="i !== child.value.length - 1"
                          class="line"
                        ></span>
                      </span>
                    </div>
                  </div>
                </li>
              </el-tooltip>
            </ul>
            <div class="tags-box">
              <AssetTags
                :id="item.id"
                :key="item.id"
                :category="item.businessType"
                :col-num="2"
                :value="item.tag"
                @tagClick="tagClick"
                @updateTags="updateTags"
              ></AssetTags>
            </div>
          </div>
          <div v-if="showRadar(item)" class="list-middle-right">
            <RadarChart :index="index" :public-item="item"></RadarChart>
          </div>
        </div>
        <div v-if="item.bugDesc" class="expose-list-bottom">
          <el-collapse>
            <el-collapse-item name="1" title="漏洞详情">
              <div v-html="item.bugDesc"></div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, ref, watchEffect } from 'vue';
import AssetTags from '@/components/Attack/AssetTags.vue';
import { useStore } from 'vuex';
const store = useStore();
const emit = defineEmits([
  'clickItem',
  'successFn',
  'updateTags',
  'exposureHandle',
]);
const props = defineProps({
  publicList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  category: {
    type: String,
    default: '',
  },
});
const listData = ref<any>([]);
const exposureList = ref<any>([]);
watchEffect(()=>{
  listData.value =props.publicList ;
  listData.value.forEach((el) => {
    el.fieldArr = mergeData(el);
  });
  
})
const iconPrefix = (url) => {
  let newUrl = '';
  if (url) {
    const substring = url.substring(4);
    newUrl = `/dayu/v1/huaun${substring}`;
  }
  return newUrl;
};
const setDefaultImage = (e) => {
  e.target.src = require('@/static/images/retrieval/full.png');
};
const clickItem = (item) => {
  emit('clickItem', item);
};
const operateClick = (type, item) => {
  // if (type === 'url') {
  //   if (item.businessType === 'web') {
  //     window.open(item.name)
  //   } else if (item.businessType === 'ip') {
  //   } else if (item.businessType === 'domain') {
  //     window.open(`http://${item.domain}`)
  //   } else if (item.businessType === 'app') {
  //     window.open(item.sourceUrl)
  //   }
  // }
  window.open(item.link);
};
const successFn = () => {
  emit('successFn');
};
const updateTags = () => {
  emit('updateTags');
};
const getName = (item) => {
  const name = item.vulName;
  return name;
};
const showRadar = (item) => {
  const showList = ['web', 'ip', 'domain', 'app'];
  return showList.includes(item.businessType);
};
const tooltipContent = (item) => {
  let content = item.value.join('，');
  let tip = `${item.name}：${content}`;
  return tip;
};
// 驼峰字符串转下划线字符串
const toUnderline = (str) => {
  return str.replace(/([A-Z])/g, '_$1').toLowerCase();
};
// 点击值输入框拼接条件
const valueClick = (item, res) => {
  let paramsKey = toUnderline(item.key);

  const totalKey = `${paramsKey}=${res}`;
  const arrIndex = exposureList.value.indexOf(totalKey);
  if (arrIndex > -1) {
    // 取消选中
    exposureList.value.splice(arrIndex, 1);
  } else {
    // 点击选中
    exposureList.value.push(totalKey);
  }

  // 获取当前被选中的类型
  let strVal = '';
  const commonTags = store.state.attack.commonField;
  if (commonTags.includes(paramsKey)) {
    strVal = `(${paramsKey}=="${res}")`;
  } else {
    strVal = `(${props.category}.${paramsKey}=="${res}")`;
  }
  emit('exposureHandle', strVal, arrIndex > -1);
};
// 点击标签
const tagClick = (val) => {
  const arrIndex = exposureList.value.indexOf(val);
  if (arrIndex > -1) {
    // 取消选中
    exposureList.value.splice(arrIndex, 1);
  } else {
    // 点击选中
    exposureList.value.push(val);
  }
  let strVal = `(tag=="${val}")`;
  emit('exposureHandle', strVal, arrIndex > -1);
};
const publicField = (type) => {
  const dataObj = {
    assetVul: [
      {
        key: 'bugUrl',
        name: '存在位置',
        icon: 'vul-icon-address',
      },
      {
        key: 'company',
        name: '所属单位',
        icon: 'vul-icon-company',
      },
    ],
  };
  return dataObj[type];
};
// 组装数据
const mergeData = (itemData) => {
  const arr :any = [];
  const allData = publicField(props.category);
  const splitList = [
    'ip',
    'productName',
    'productCategory',
    'keyword',
    'dataSource',
  ];
  for (let j = 0; j < allData.length; j++) {
    let obj = {};
    let value :any= [];
    if (itemData[allData[j].key]) {
      if (splitList.includes(allData[j].key)) {
        value = itemData[allData[j].key].split(',');
      } else {
        value = [itemData[allData[j].key]];
      }
    } else {
      value = ['--'];
    }
    obj = {
      ...allData[j],
      value,
    };
    arr.push(obj);
  }
  return arr;
};
</script>
<style lang="scss" scoped>
.expose-list-wrap {
  .list-content {
    display: flex;
    background: #fff;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid transparent;

    &:hover {
      border: 1px solid $-v-color-primary;

      .list-left {
        .left-box {
          .checkbox {
            opacity: 1;
          }
        }
      }
    }
  }

  .list-left {
    .left-box {
      margin-right: 8px;

      .checkbox {
        opacity: 0;
        transition: opacity 0.2s;
        margin-top: 5px;
      }
    }
  }

  .list-middle {
    > img {
      width: 28px;
      height: 28px;
      margin-right: 8px;
      border-radius: 4px;
    }
  }

  .list-right {
    flex: 1;

    .expose-list-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;

      .list-top-left {
        flex: 1;
        display: flex;
        align-items: center;

        > .name {
          font-family: PingFangSC-Medium;
          font-size: 16px;
          line-height: 24px;
          // color: rgba(255, 255, 255, 0.8);
          margin-right: 18px;
          cursor: pointer;

          &:hover {
            color: $-v-color-primary;
          }
        }
      }

      .list-top-right {
        margin-left: 10px;
        // width: 200px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }

    .expose-list-middle {
      display: flex;
      // align-items: center;
      justify-content: space-between;

      &.border-bottom {
        border-bottom: 1px solid rgba(216, 216, 216, 0.1);
      }

      .list-middle-left {
        flex: 1;

        > ul {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          > li {
            display: flex;
            align-items: center;
            margin-right: 8px;
            margin-bottom: 16px;
            height: 25px;

            .left {
              flex-shrink: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 22px;
              height: 25px;
              flex: 0 0 22px;
              border-radius: 4px 0px 0px 4px;
              box-sizing: border-box;
              border: 1px solid #3c3f5e;
              background: rgba(41, 45, 76, 0.5);

              i {
                font-size: 15px;
                color: rgba(255, 255, 255, 0.5);
              }
            }

            .right {
              height: 25px;
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid #3c3f5e;
              border-radius: 0px 4px 4px 0px;
              border-left: 0;
              padding: 0px 12px;

              .item-box {
                // display: flex;
                // align-items: center;
                // color: rgba(255, 255, 255, 0.6);
                font-size: 12px;
                max-width: 310px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis; //文本超出时显示省略号

                .item {
                  cursor: pointer;
                }

                .line {
                  width: 0px;
                  height: 12px;
                  opacity: 1;
                  border: 1px solid rgba(255, 255, 255, 0.3);
                  margin: 0px 10px;
                }
              }
            }
          }
        }

        .tags-box {
          display: flex;
          align-items: center;
          > .line {
            width: 0px;
            height: 14.5px;
            margin-right: 10px;
            opacity: 1;
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin: 0px 10px;
          }
        }
      }

      .list-middle-right {
        width: 340px;
      }
    }

    .expose-list-bottom {
      position: relative;
      padding-left: 10px;

      &::before {
        content: '';
        position: absolute;
        top: 18px;
        left: 0;
        width: 2px; /* 竖线的宽度 */
        height: 12px; /* 竖线的高度 */
        background-color: $-v-color-primary; /* 竖线的颜色 */
      }
    }
  }
}
</style>
